<template>
  <div class="section-left">
    <div class="left-nav">
      <h2>产品与服务</h2>
      {{$route.path}}
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :unique-opened="true" router @open="handleOpen" @close="handleClose" @select="handleSelect">
        <template v-for="item in route">
          <el-menu-item :index="item.path"  v-if="!item.children">
            <i class="el-icon-menu"></i>{{item.title}}
          </el-menu-item>
          <el-submenu :index="item.path" v-if="item.children">
            <template slot="title">
              <router-link :to="item.path" tag="div">
                <i class="el-icon-message"></i>{{item.title}}
              </router-link>
            </template>
            <template v-for="child in item.children">
              <el-submenu :index="child.path" v-if="child.children">
                <template slot="title">{{child.title}}</template>
                <el-menu-item :index="child2.path" v-for="child2 in child.children">{{child2.title}}</el-menu-item>
              </el-submenu>
              <el-menu-item :index="child.path" v-if="!child.children">{{child.title}}</el-menu-item>
            </template>
          </el-submenu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'section-left',
  data () {
    return {
      route: [
        {
          title: '导航一',
          path: '/marketActivity/pa2/1',
          children: [
            {
              title: '选项1',
              path: '/marketActivity/pa1/1'
            },
            {
              title: '选项2',
              path: '/marketActivity/pa1/2'
            },
            {
              title: '选项3',
              path: '/marketActivity/pa1/3'
            },
            {
              title: '选项4',
              path: '/marketActivity/pa1/4',
              children: [
                {
                  title: '选项4-1',
                  path: '/marketActivity/pa1/4/pa2/1'
                }
              ]
            }
          ]
        },
        {
          title: '导航二',
          path: '/marketActivity/pa2/2'
        },
        {
          title: '导航san',
          path: '/marketActivity/pa2/3'
        }
      ]
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    }
  },
  computed: {
  }
}
</script>

<style>
  .el-menu{
    background: #fff;
  }
  .el-submenu .el-menu-item:hover, .el-submenu__title:hover{
    color: #fff;
    background: #72beff;
  }
  .el-submenu .el-menu{
    background: #fff;
  }
  .el-menu-item, .el-submenu__title{
    height: 36px;
    line-height: 36px;
  }
  .el-submenu .el-menu-item{
    height: 36px;
    line-height: 36px;
  }
</style>

<style lang="css" scoped>
  .section-left{
    flex: 0 0 240px;
    width: 240px;
    background: #fff;
  }
  .left-nav h2{
    padding-left: 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #168aed;
  }
  .el-menu-vertical-demo{
    margin: 20px;
  }
</style>
